<template>
    <view class="category">
        <view class="header">
            <image class="background-image" src="/static/img/1.1 .png" mode="aspectFill"></image>
            <view class="search-bar">
                <picker onChange="bindPickerChange" :value="cityIndex" :range="cities">
                    <view class="picker">{{ cities[cityIndex] }}</view>
                </picker>
                <input class="search-input" onChange="onChange" placeholder="请输入搜索文字" confirm-type="search" onConfirm="doneSearch" onInput="bindKeyInput" />
                <view class="cancel">
                    <ant-button type="primary" inline onTap="doneSearch" className="round">搜索</ant-button>
                </view>
            </view>
        </view>

        <view class="recommend-section" onTap="tiaozhuan">
            <view class="section-title">推荐景点</view>
            <block v-for="(item, index) in tuijian" :key="index">
                <view class="hotel-card">
                    <image class="hotel-image" :src="item.picture" mode="aspectFill"></image>
                    <view class="hotel-info">
                        <view class="hotel-name">{{ item.scenicname }}</view>
                        <view class="hotel-type">{{ item.scenicclass }}</view>
                        <view class="hotel-tags">
                            <text class="tag">{{ item.details }}</text>
                        </view>
                        <image
                            class="image2"
                            mode="scaleToFill"
                            src="https://files.superbed.cn/proxy7468686c6f2633337a7570796f326f696c796e7e7978327f72336f68736e793375717d7b796f33252e33782d332a2a2529787f797878257f2f2c2b7e2b7925292a252e782d326c727b"
                        />
                        <view class="hotel-location">{{ item.address }}</view>
                    </view>
                </view>
            </block>
        </view>
        <block v-if="noData">
            <view class="no-more-container">
                <image mode="scaleToFill" src="https://ffa.firstui.cn/uploadfile/240901193015838.png" class="no-more-image" />
                <view class="no-more">暂无更多</view>
            </view>
        </block>
    </view>
</template>

<script>
	import {
		ref,
		onMounted
	} from 'vue';
	import {
		onShow,
		onLoad
	} from '@dcloudio/uni-app';
	import {
		onPullDownRefresh,
		onReachBottom
	} from "@dcloudio/uni-app";

export default {
    // 页面加载时获取推荐列表
    data() {
        return {
            address: '',
            clicknum: 0,
            createtime: '',
            dengji: '',
            details: '',
            picture: '',
            price: 0,
            scenicclass: '',
            scenicname: '',
            scenicspotid: 0,
            addressname: '',
            searchname: '',
            tuijian: [],
            // 保存推荐列表
            searchText: '',
            // 保存搜索文本
            cities: ['厦门', '北京', '上海', '黑龙江', '吉林', '浙江'],
            cityIndex: 0,
            noData: false // 无数据标志
        };
    },
    onLoad() {
        this.loadRecommendations();
    },
    methods: {
        // 更新 searchText 数据
        bindKeyInput(e) {
            this.setData({
                searchText: e.detail.value
            });
            console.log(e.detail.value);
        },

        // 搜索操作
        doneSearch() {
            const { searchText, cityIndex, cities } = this;
            const selectedCity = cities[cityIndex]; // 获取选择的城市
            uni.request({
                url: url + '/searchScenicspot',
                method: 'POST',
                data: {
                    addressname: selectedCity,
                    searchname: searchText
                },
                headers: {
                    'content-type': 'application/json'
                },
                dataType: 'json',
                success: (res) => {
                    console.log('Request succeeded:', res);
                    if (res.data && res.data.data) {
                        this.setData({
                            tuijian: res.data.data,
                            // 更新 tuijian 列表
                            noData: res.data.data.length === 0
                        });
                    } else {
                        this.setData({
                            noData: true
                        }); // 没有返回数据时显示暂无更多
                    }
                },
                fail: (error) => {
                    console.error('Request failed', error);
                    this.setData({
                        noData: true
                    }); // 请求失败时也显示暂无更多
                }
            });
        },

        loadRecommendations() {
            const { cityIndex, cities } = this;
            const selectedCity = cities[cityIndex];
            uni.request({
                url: url + '/searchScenicspot',
                method: 'POST',
                data: {
                    addressname: '',
                    classname: '',
                    searchname: ''
                },
                headers: {
                    'content-type': 'application/json'
                },
                dataType: 'json',
                success: (res) => {
                    if (res.data.data) {
                        this.setData({
                            tuijian: res.data.data,
                            noData: res.data.data.length === 0
                        });
                        console.log(res.data.data);
                    } else {
                        this.setData({
                            noData: true
                        }); // 没有返回数据时显示暂无更多
                    }
                },
                fail: (error) => {
                    console.error('Request failed', error);
                    this.setData({
                        noData: true
                    }); // 请求失败时也显示暂无更多
                }
            });
        },

        // 处理城市选择改变
        bindPickerChange(e) {
            console.log('picker发送选择改变，携带值为' + e.detail.value);
            this.setData({
                cityIndex: e.detail.value
            });
            console.log('选择的城市为' + this.cities[this.cityIndex]);
        },

        // 处理跳转
        tiaozhuan() {
            uni.navigateTo({
                url: '/pages/Tuijian/Tuijian'
            });
        }
    }
};
</script>
<style>
.header {
    position: relative;
}

.background-image {
    width: 100%;
    height: 173px;
}

.search-bar {
    display: flex;
    align-items: center;
    position: absolute;
    bottom: 20px;
    width: 100%;
    padding: 0 10px;
}

.picker {
    flex: 1;
    margin-right: 10px;
}

.search-input {
    display: flex;
    margin-right: 10px;
    border-radius: 10px;
    width: 240px;
}

.search-button {
    display: flex;
    border-radius: 20px;
    background-color: #3a94ee;
    width: 48px;
    height: 35px;
}
.recommend-section {
    padding: 10px;
}

.section-title {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 10px;
}

.hotel-card {
    display: flex;
    margin-bottom: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
    overflow: hidden;
}

.hotel-image {
    width: 102px;
    height: 102px;
}

.hotel-info {
    padding: 10px;
    flex: 1;
}

.hotel-name {
    margin-top: 5px;
    font-size: 16px;
    font-weight: bold;
}

.hotel-type,
.hotel-price {
    margin-top: 5px;
    font-size: 14px;
    color: #666;
}
.hotel-location {
    display: inline-block;
    font-size: 16px;
    color: #666;
}

.hotel-tags .tag {
    margin-right: 5px;
    background-color: #eee;
    padding: 2px 5px;
    border-radius: 3px;
    color: #ee3a49;
}

.hotel-rating {
    padding: 10px;
    font-size: 14px;
    color: #f60;
}

.image2 {
    margin-top: 5px;
    width: 15px;
    height: 15px;
}
.no-more-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%; /* 或根据需要设置合适的高度 */
    text-align: center;
}

.no-more-image {
    width: 150rpx; /* 根据需要调整图片大小 */
    height: 150rpx; /* 根据需要调整图片大小 */
    margin-bottom: 20rpx; /* 图片与文字之间的间距 */
    margin-top: 170px;
}
.no-more {
    font-size: 32rpx; /* 根据需要调整字体大小 */
    color: #999; /* 根据需要调整字体颜色 */
}

</style>
